<template>
    <el-dialog title="分配角色" width="30%" v-model="props.visible" @closed="handle">
        <el-form label-width="120px">
            <el-form-item label="角色名称">
                <el-input type="text" placeholder="请输入姓名" v-model="form.name" />
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" placeholder="请输入角色描述" v-model="form.description" />
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group class="ml-4" v-model="form.status">
                    <el-radio label="1" size="large">是</el-radio>
                    <el-radio label="2" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button>取消</el-button>
                <el-button @click="adduser">确定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, withDefaults, defineEmits, watchEffect } from 'vue'
import { ElMessageBox, ElMessage, formEmits } from 'element-plus'
import type { Ref } from 'vue'
import * as api from '../../request/api'
import { Role } from '../../request/QmsAdminConreiller/index'


let props = withDefaults(
    defineProps<{
        visible: boolean;
        form: Role
    }>(), {
    visible: true
})

const originform = ref({}) as Ref<Role>
const form = ref({}) as Ref<Role>

watchEffect(() => {
    console.log(props.form);

    if (props.form) {
        form.value = props.form
    }
}
)
const emit = defineEmits(["getValue"])
const handle = () => {
    console.log(emit);
    emit("getValue", false)
}
const adduser = () => {
    //数据传输
    ElMessageBox.confirm(
        '确定添加嘛',
        '添加提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // await api.admin.createrole(form.value)
            console.log(props.form);
            ElMessage({
                type: 'success',
                message: '提交成功',
            })
            emit("getValue", false)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })

}
const change = () => {
    if (!props.form) {
        console.log('111');
    } else if (props.form) {
        console.log(props.form);
        form.value = props.form
    }
}
change()
</script>

<style scoped></style>